<template>
  <div class="channel-edit">
    <!-- 当前登陆用户已经订阅的频道 -->
    <div class="channel">
      <van-cell title="我的频道" :border="false">
        <van-button plain size="mini" type="danger" @click="isShow=!isShow">
          {{isShow===true ? '取消':'编辑'}}
        </van-button>
      </van-cell>
      <van-grid>
        <!-- !!!!子传父：依据index点击哪个，首页也对应哪个 -->
        <!-- !!!!高亮依据父传子：active -->
        <van-grid-item
        @click="current(index)"
        :class="{hightlight:index===active}"
        v-for="(item,index) in channels" :key="item.id">
          <span>{{item.name}}</span>
          <!-- 叉号 --细节：【推荐】这个不带‘叉号’-->
          <van-icon name="cross" class="btn"
          v-if="index !==0 && isShow"
          @click.stop="delChannels(item,index)"
          ></van-icon>
        </van-grid-item>
      </van-grid>
    </div>
     <!-- 当前登陆用户没有订阅的频道 -->
    <div class="channel">
      <van-cell title="可选频道" :border="false"></van-cell>
      <van-grid>
        <van-grid-item @click="addFn(item)" v-for="item in optionalChannels" :key="item.id">
          <span>{{item.name}}</span>
        </van-grid-item>
      </van-grid>
    </div>
  </div>
</template>

<script>
import { mapActions, mapGetters, mapMutations, mapState } from 'vuex'
import { reqSetApi } from '@/api/channels'
export default {
  name: 'ChannelEdit',
  props: {
    active: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      isShow: false
    }
  },
  // ==== 用户频道 =====
  computed: {
    ...mapState('channels', ['channels']),
    ...mapGetters('channels', ['optionalChannels'])
  },
  // ==== 所有频道 【页面中不展示，vue中有】=====
  created () {
    this.getAllChannelsAsync()
  },
  methods: {
    ...mapActions('channels', ['getAllChannelsAsync']),
    ...mapMutations('channels', ['addChannels', 'delChannels']),
    // 子传父
    current (index) {
      this.$emit('currentIndex', index)
    },
    // 添加频道
    async addFn (item) {
      this.addChannels(item)
      // 将添加的频道同步到vuex中，刷新不丢失
      this.notLost()
      this.$toast('添加成功')
    },
    // 点击叉号，删除频道
    delChannels (channel, index) {
      // 优化：1.当前频道被删除，active=0 直接跳到[推荐]
      if (index === this.active) {
        this.$emit('updata-active', 0)
      }
      // 2.当前频道的前面被删除，active-1
      if (index < this.active) {
        this.$emit('update-active', this.active - 1)
      }
      this.delChannels(channel)
      // 同步到vuex中，刷新不丢失
      this.notLost()
      this.$toast('删除成功')
    },
    // 封装同步到vuex中的函数
    async notLost () {
      // console.log(this.channels) 用户频道：数组里包对象
      const newArr = this.channels.map((item, index) => {
        return { id: item.id, seq: index }
      })
      await reqSetApi(newArr)

      // 以上 刷新后发现与点击添加的顺序不一致，是后台接口的问题
    }

  }
}
</script>

<style lang="scss" scoped>
.channel{
  padding:15px;
  font-size:14px;
  ::v-deep .van-button--mini {
    height: 22px;
    min-width: 50px;
  }
  .btn {
    position: absolute;
    top: 5px;
    right: 5px;
    font-size: 14px;
  }
  .hightlight{
    color: red;
  }
}
</style>
